<template>
  <div id="myChart" :style="{ width: '95%', height: height + 'px' }"></div>
</template>

<script>
import * as echarts from 'echarts'
import { resizePxNum } from '@/utils'
import { getAction } from '@api/manage'

export default {
  name: 'monthlyMonitoring',
  components: {
    resizePxNum,
  },
  props: {
    height: {
      type: Number,
      default: 500,
    },
    area: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      timeX: [],
      lineData: {
        area: {},
        average: {},
        total: {},
      },
    }
  },
  mounted() {
    this.dataInit()
  },
  methods: {
    dataInit() {
      this.getData()
      setTimeout(() => {
        this.echartsInit()
      }, 500)
      window.addEventListener('resize', () => {
        this.echartsInit()
      })
    },
    echartsInit() {
      let option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          formatter: function (params) {
            let result = params[0].name + '月<br/>'
            params.forEach(function (item) {
              result += item.marker + ' ' + item.seriesName + ': ' + item.value + '%<br/>'
            })
            return result
          },
        },
        legend: {
          data: ['黄浦区', '各区平均', '全市'],
          bottom: resizePxNum(0),
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.timeX,
          // boundaryGap: true, //两边留白
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 0, // 使x轴文字显示全
            formatter: '{value}%', //y轴数值，带百分号
          },
        },
        series: [
          {
            name: this.area,
            type: 'line',
            symbol: 'circle',
            symbolSize: 9,
            data: this.lineData.area,
          },
          {
            name: '各区平均',
            type: 'line',
            symbol: 'circle',
            symbolSize: 9,
            data: this.lineData.average,
          },
          {
            name: '全市',
            type: 'line',
            symbol: 'circle',
            symbolSize: 9,
            data: this.lineData.total,
          },
        ],
      }
      this.myChartOne = echarts.init(document.getElementById('myChart'))
      this.myChartOne.setOption(option)

      this.myChartOne.on('click', (params) => {
        // 获取 x 轴的值
        const xAxisValue = params.name
        this.getDataForXAxisValue(xAxisValue)
      })

      window.addEventListener('resize', () => {
        if (this.myChartOne) {
          this.myChartOne.resize()
        }
      })
    },
    getData() {
      getAction('/carbon/earlyWarnPrediction/queryByArea', { area: this.area }).then((res) => {
        console.log(res.result)
        let { area: areaData, qs: total, pj: average } = res.result
        this.timeX = areaData.map((item) => item.monthStr)
        this.lineData.area = areaData.map((item) => item.totalYoy)
        this.lineData.average = average.map((item) => item.totalYoy)
        this.lineData.total = total.map((item) => item.totalYoy)
        // 将timeX倒置
        this.timeX = this.timeX.reverse()
        this.lineData.area = this.lineData.area.reverse()
        this.lineData.average = this.lineData.average.reverse()
        this.lineData.total = this.lineData.total.reverse()
      })
    },
    getDataForXAxisValue(xAxisValue) {
      //   传值到父组件
      this.$emit('xAxisValue', xAxisValue)
    },
    asyncData() {
      this.dataInit()
    },
  },
}
</script>

<style lang="stylus" scoped></style>
